<!--登录页-->
<template>
  <div class="LoginContainer">
    <div class="LoginContent">
      <img src="../../../static/image/logo.png" class="logoicon" />
      <p class="loginp">
        <img src="../../../static/image/usericon.png" class="usericon" />
        <input type="text" v-model="username" placeholder="用户名" class="userinput" />
      </p>
      <p class="loginp loginp1">
        <img src="../../../static/image/userpwd.png" class="usericon" />
        <input v-model="password" type="password" placeholder="密码" class="userinput" />
      </p>
      <p class="loginrem">
        <van-checkbox
          v-model="remberpwdchecked"
          shape="square"
          icon-size="12px"
          @change="changechecked"
        >记住我</van-checkbox>
        <router-link to="/fogotPwd" style="color:#fff">
          <span class="gorgotspan">忘记密码?</span>
        </router-link>
      </p>
      <button @click="login" class="loginbut">登录</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex"; //先导入vuex的方法
export default {
  name: "HelloWorld",
  data() {
    return {
      //讲师团队
      lecturerlist: [],
      //专业实训
      perfisonallist: [],
      params: {},
      username: "",
      password: "",
      login_type: 1,
      remberpwdchecked: false
    };
  },
  computed: {
    ...mapState({
      rember: state => state.remberpwdchecked
    })
  },
  methods: {
    //存储记住密码的复选框值
    changechecked() {
      this.changeremberpwdchecked({
        remberpwdchecked: this.remberpwdchecked
      });
    },
    //对全局的方法login进行监控
    ...mapMutations(["changeLogin", "changeremberpwdchecked", "logine"]),
    login() {
      this.$toast.loading({
        mask: true,
        message: "加载中..."
      });

      var that = this;

      if (that.username.length == 0) {
        this.$toast({
          message: "用户名不能为空"
        });
        return false;
      }
      if (that.password.length == 0) {
        this.$toast({
          message: "密码不能为空"
        });
        return false;
      }

      this.params = {
        username: this.username,
        password: this.password,
        login_type: this.login_type
      };
      this.$http
        .get(`${this.$basePath}?service=App.Account.LoginToken`, {
          params: this.params
        })
        .then(res => {
          if (res.ret == 200) {
            //清空
            localStorage.removeItem("home-tab");
            this.$toast.clear();
            this.logine();
            //console.log("再次登录,jizhu密码", that.remberpwdchecked);
            //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (that.remberpwdchecked) {
              // console.log("checked == true");
              //传入账号名，密码，和保存天数3个参数
              that.setCookie(res.data.account.username, this.password, 7);
            } else {
              //console.log("清空Cookie");
              //清空Cookie
              that.clearCookie();
            }
            // 将用户token保存到vuex中
            this.changeLogin({
              Authorization: res.data.token,
              AuthorizationUsername: res.data.account.username,
              AuthorizationPassword: this.password,
              AuthorizationRecord_id: res.data.account.record_id,
              AuthorizationId: res.data.account.id,
              userData: res.data.user,
              AuthorizationPhone: res.data.user.phone
            });
            this.$router.push({
              //核心语句
              path: "/home" //跳转的路径
            });
            //console.log("登录数据", res);
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },

    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
    backbutton() {
      navigator.app.exitApp();
    }
  },
  mounted() {
    this.remberpwdchecked = this.rember;
    //console.log("记住密码选型", this.remberpwdchecked);
    this.getCookie();
    if (this.remberpwdchecked == false) {
      this.password = "";
      this.username = "";
    }
    var that = this;
    document.addEventListener("backbutton", that.backbutton, false);
  },
  destroyed() {
    var that = this;
    document.removeEventListener("backbutton", that.backbutton, false);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "../../assets/css/login.less";
.gorgotspan {
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
</style>
